<template>
	<view class="cenTenst">
       <view class="headLog">
			<image :src="cenTent.img" mode=""></image>
       </view>
	   <view class="SignIn">
		   <!-- <input placeholder-style="color:#c8dff0" type="number" placeholder="获取验证码" class="SignSjh" /> -->
		   <view class="CodeYz">
			   <input  placeholder-style="color:#c8dff0" type="number" placeholder="请输入手机号"/>
			   <view class="uni-countdown-numbers" @click="click" :id="id">{{text}} {{s}}</view>
		   </view>
		   <input placeholder-style="color:#c8dff0" type="number" placeholder="请输入验证码" class="SignSjh" />
		   <input placeholder-style="color:#c8dff0" type="password" placeholder="请输入密码" class="SignSjh" />
		   <input type="button" value="重置密码" class="SignLbtn" disabled="disabled" @click="reset"/>
	   </view>

	</view>
</template>

<script>
	export default {
		name: "uni-countdown",
		props: {
			bgrColor: {
				type: String,
				default: "#FFFFFF"
			},
			borderColor: {
				type: String,
				default: "#000000"
			},
			fontColor: {
				type: String,
				value: "#ec4e47" 
			},
			splitorColor: {
				type: String,
				default: "#000000"
			},
			timer: {
				type: String,
				default: ""
			}
			
		},
		data() {
			return {
				setTime: null,
				h: '00',
				i: '00',
				s: '',
				leftTime: 0,
				text:'获取验证码',
				id:1,
				cenTent:{
					img:'../../../static/images/user/gongsyh.png',
				},
			}
		},
		created: function(e) {	
			var reg = /^([0-9]{4})-([0-9]{2})-([0-9]{2}) ([0-9]{2}):([0-9]{2}):([0-9]{2})$/;
			var res = this.timer;
			// console.log(this.timer)
			if (res == null) {
				console.log('时间格式错误');
				return false;
			} else {
				var s = parseInt(res);
				if (s < 0 || s > 60) {
					console.log('时间格式错误');
					return false;
				}
				// var leftTime = new Date(i, s);
				this.leftTime = '60';
				this.countDown(this);
				this.setInterValFunc(this);
			}
		},
		beforeDestroy() {
			clearInterval(this.setTime)
		},
		methods: {
			setInterValFunc: function(obj) {
				this.setTime = setInterval(function() {
					obj.countDown(obj);
				}, 1000);
			},
			click:function(){
				this.text = '重新获取'
				this.s = 60
			},
			countDown: function(self) {
				
				if(self.text == '重新获取'){
					if(self.s > 0){
						self.s -= 1;
					}else if(self.s == 0){
						self.s = 60;
						self.text = '获取验证码'
					}
				}
			},
			reset(){
				uni.showToast({
					title: '重置成功',
					duration: 2000,
				});
				// uni.navigateTo({
				// 	url:'login'
				// })
			}
		}
	}
</script>

<style>
	page{
		background: #13b1eb;
	}
	.CodeYz{
		width: 70%;
		color: #fbfbfb;
		padding: 20upx 50upx;
		font-size: 34upx;
		border-radius: 60upx;
		background: rgba(255,255,255,0.2);
		margin: 0 auto;
		margin-bottom: 26upx;
		display: flex;
	}
	.CodeYz input{
		font-size: 34upx;
		width: 60%;
	}
	.CodeYz view{
		width: 40%;
		text-align: center;
		border-left: 1upx solid #fbfbfb;
		font-size: 30upx;
		color: #fbfbfb;
	}
	.SignIn{
		width: 100%;
		margin-top: 80upx;
	}
	.userView{
		width: 80%;
		margin: 0 auto;
		text-align: center;
		font-size: 32upx;
		color: #fbfbfb;
	}
	.userView view{
		line-height: 1.4;
	}
	.userZc{
		color: #fbfbfb;
		font-size: 32upx;
	}
	.userWj{
		font-size: 32upx;
		color: #fbfbfb;
	}
	.SignSjh{
		width: 70%;
		color: #fbfbfb;
		padding: 20upx 50upx;
		font-size: 34upx;
		border-radius: 60upx;
		background: rgba(255,255,255,0.2);
		margin: 0 auto;
		margin-bottom: 26upx;
	}
	.SignLbtn{
		width: 70%;
		color: #13b1eb;
		padding: 20upx  50upx;
		font-size: 34upx;
		border-radius: 60upx;
		background: #fbfbfb;
		margin: 0 auto;
		margin-bottom: 26upx;
		text-align: center;
	}
	.headLog{
		width: 180upx;
		height: 180upx;
		border-radius: 50%;
		background: #fbfbfb;
		padding: 1%;
		text-align: center;
		margin: 0 auto;
		margin-top: 100upx;
	}
	.headLog image{
		width: 98%;
		height: 98%;
		border-radius: 50%;
	}
</style>
